<template>
  <div class="layout">
    <Layout v-bind:style="{ minHeight: '100vh' }">
      <Sider v-bind:style="{ position: 'fixed', height: '100vh', left: 0, overflow: 'auto', width: '150px', minWidth: '150px' }">
        <Menu v-bind:active-name="$route.name" theme="dark" width="auto" v-on:on-select="selectHandler">
          <Submenu name="1">
            <template slot="title">
              资源管理
            </template>
            <MenuItem name="tilesetManage">图集</MenuItem>
            <MenuItem name="autotileManage">AutoTile</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              对象管理
            </template>
            <MenuItem name="envManage">环境</MenuItem>
            <MenuItem name="items-video">互动</MenuItem>
            <MenuItem name="pay">角色</MenuItem>
          </Submenu>
          <MenuItem name="mapManage">地图编辑</MenuItem>
          <MenuItem name="output">导出资源</MenuItem>
        </Menu>
      </Sider>
      <Layout v-bind:style="{ marginLeft: '150px', height: '100vh', position: 'relative' }">
        <Content v-bind:style="{ position: 'absolute', top: '0', bottom: '0', left: '0', right: '0' }">
          <div v-bind:style="{ position: 'relative', width: '100%', height: '100%' }">
            <router-view></router-view>
          </div>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script src="./home.js"></script>

<style lang="stylus">
@import './home.styl'
</style>
